<template>
  <div class="w-100% h-100% flex">
    <div style="width: 200px;">
      <ElInput
          v-model="menuTreeQueryKey"
          placeholder="搜索菜单"
          clearable
      />
      <ElTree
          ref="treeEl"
          :data="menuTree"
          highlight-current
          :expand-on-click-node="false"
          node-key="id"
          :current-node-key="parentId"
          :filter-node-method="filterNode"
          @node-click="onSelectMenuTree"
      >
      </ElTree>
    </div>

    <div class="w-100% ml-10px">
      <ProTable
        ref="menuTableRef"
        row-key="id"
        :filters="filters"
        :columns="columns"
        :get-table-data="getTableData"
        custom-id="basic-menu"
        @filter-reset="filterReset"
      > 
        <template #filter-parentId>
          <el-cascader v-model="parentId" :options="menuTree" filterable clearable :props="{ checkStrictly: true, expandTrigger: 'hover', emitPath: false }"/>
        </template>
        <template #filter-bottom>
          <el-button @click="addMenu" type="primary">新增</el-button>
        </template>
        <template #column-icon="{ row }">
          <Icon v-if="row.icon" :icon="row.icon" />
        </template>
        <template #column-status="{ row }">
          <el-popconfirm @confirm="updateEnableStatus(row)" :title="`是否确认${row.enableStatus ? '禁用' : '启用'}`">
            <template #reference>
              <el-switch
                :model-value="row.enableStatus"
                inline-prompt
                active-text="是"
                inactive-text="否"
              />
            </template>
          </el-popconfirm>
        </template>
        <template #column-operate="{ row }">
          <el-button type="primary" link @click="openOperationLogDialog(row.id)">
            <Icon icon="icon-park-outline:history-query" />日志
          </el-button>

          <el-button type="primary" link @click="editMenu(row.id)">
            <Icon icon="carbon:edit" />编辑
          </el-button>
          
          <el-button type="primary" link @click="editMenuPermission(row.id)">
            <Icon icon="icon-park-outline:config" />资源设置
          </el-button>

          <el-popconfirm @confirm="deleteMenu(row.id)" title="是否确认删除">
            <template #reference>
              <el-button type="danger" link>
                <Icon icon="ep:delete" />删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </ProTable>
    </div>

    <EditMenu
      ref="EditMenuRef"
      @submit="refreshData"
    >
    </EditMenu>
    <EditMenuPermission ref="EditMenuPermissionRef"></EditMenuPermission>

  </div>
</template>

<script setup lang="ts">
  import { ref, unref, nextTick, watch, reactive } from 'vue'
  import { ElTree, ElInput, ElButton, ElPopconfirm, ElCascader } from 'element-plus'
  import { ProTable, FilterItem, TableColumnItem, Icon } from '@/components'
  import { openOperationLogDialog } from '@/components/operationLog'
  import { listToTree } from '@/utils'
  import { createYesNoEnum } from '@/constants'
  import { selectMenuListApi, selectMenuPageApi, updateEnableStatusApi, deleteMenuApi } from '@/api/system/menu'
  import { MenuRes } from '@/api/system/menu/types'
  import EditMenu from './components/edit-menu.vue'
  import EditMenuPermission from './components/edit-menu-permission.vue'

  // 菜单类型
  const menuTypeEnum = [
    { label: '目录', value: 1 },
    { label: '菜单', value: 2 },
  ]
  // 启用禁用
  const enableStatusEnum = createYesNoEnum('启用', '禁用')

  const treeEl = ref<InstanceType<typeof ElTree>>()
  const menuTableRef = ref<InstanceType<typeof ProTable>>()
  const EditMenuRef = ref<InstanceType<typeof EditMenu>>()
  const EditMenuPermissionRef  = ref<InstanceType<typeof EditMenuPermission>>()
  const parentId = ref('')
  const menuTree = ref<MenuRes[]>([])
  const initMenuTree = async () => {
    const res = await selectMenuListApi()
    menuTree.value = listToTree(res.data, { valueKey: 'id', labelKey: 'menuName' })
  }
  initMenuTree()

  const menuTreeQueryKey = ref('')
  watch(
    () => menuTreeQueryKey.value,
    (val) => {
      unref(treeEl)!.filter(val)
    }
  )
  

  const filterNode = (value: string, data: MenuRes) => {
    if (!value) return true
    return data.menuName.includes(value)
  }

  const filters: FilterItem[] = [
    {
      label: '菜单名称',
      prop: 'menuName'
    },
    {
      label: '所属菜单',
      prop: 'parentId',
      slot: 'filter-parentId'
    },
    {
      label: '菜单类型',
      prop: 'menuType',
      type: 'select',
      list: menuTypeEnum
    },
    {
      label: '启用状态',
      prop: 'enableStatus',
      type: 'select',
      list: enableStatusEnum
    },
    {
      label: '备注',
      prop: 'remark'
    }
  ]

  const columns: TableColumnItem[] = [
    {
      label: '菜单名称',
      prop: 'menuName',
      fixed: 'left',
      clickProps: {
        onclick: (row, event) => {
          EditMenuRef.value.openDialog(row.id, true)
        },
      }
    },
    {
      label: '图标',
      prop: 'icon',
      width: 100,
      slot: 'column-icon'
    },
    {
      label: '编号',
      prop: 'menuCode',
      width: 100
    },
    {
      label: '所属菜单',
      prop: 'fullMenuName'
    },
    {
      label: '类型',
      prop: 'menuType',
      width: 100,
      list: menuTypeEnum,
      tagType: {
        1: 'info',
        2: 'primary'
      }
    },
    {
      label: '备注',
      prop: 'remark'
    },
    {
      label: '順序',
      prop: 'orderNum',
      width: 100
    },
    {
      label: '是否启用',
      slot: 'column-status',
      width: 100
    },
    {
      label: '操作',
      slot: 'column-operate',
      width: 300
    },
  ] 

  const getTableData = async (params) => {
    return (await selectMenuPageApi({...params, parentId: parentId.value})).data
  }

  const refreshData = () => {
    initMenuTree()
    menuTableRef.value.refreshData()
  }

  const filterReset = () => {
    parentId.value = undefined
    menuTableRef.value.refreshData()
  }

  // 选择菜单树
  const onSelectMenuTree = (node) => {
    parentId.value = node.id
    menuTableRef.value.refreshData()
  }
  // 新增菜单
  const addMenu = () => {
    EditMenuRef.value.openDialog()
  }

  // 编辑菜单
  const editMenu = (menuId) => {
    EditMenuRef.value.openDialog(menuId)
  }

  // 资源设置
  const editMenuPermission = (menuId) => {
    EditMenuPermissionRef.value.openDialog(menuId)
  }

  // 刪除菜单
  const deleteMenu = async (menuId) => {
    await deleteMenuApi({ menuId: menuId })
    refreshData();
  }

  // 启用禁用
  const updateEnableStatus = async (row) => {
    const newEnableStatus =  !row.enableStatus
    await updateEnableStatusApi({ id: row.id, enableStatus: newEnableStatus })
    refreshData();
  }

</script>

